<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			div{
				background-color: aqua;
				height: 200px;
				width: 100px;
				margin: auto;
			}
			.box1{
				background-color: aquamarine;
				height: 300px;
				width: 200px;
				display: block;
			}
			span{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 显示模式：
		1.块元素block
			比较霸道，单独占一行
			默认宽度和父盒子一样宽
			可以给盒子设置宽和高
			可以给盒子设置水平居中
			可以包含行内元素和块元素
			div,p,h1~h6,ol,ul,li,dl,dd,dt
		2.行内元素inline
			一行显示多个
			 默认宽度和内容一样宽
			 不能给盒子设置宽和高
			 行内元素中只能装文本或其他行内元素
			 span,del,a
			 针对链接标签：
				>链接里面不要放链接
				>特殊情况下可给a标签设置宽高，并包含块元素，但需要做显示模式的转换。
		3.行内块元素inline-block
			一行显示多个
			可以给元素设置宽高
			input,img,td
		元素显示模式的转换
		 display:block;	转换成块元素
			 -->
		<div>hello div</div>
		<p class="box1">段落标签</p>
		<h4>四级标题</h4>
		<span>文本</span>
		<del>删除线</del> 
	</body>
</html>
